Las imágenes de las entradas se prestan a ser mostradas con distintos estilos, unas veces eliminamos un borde que no es de nuestro agrado, otras preferimos cambiarlo porque vimos otro que nos gustó y la mayoría de veces porque nos cansa ver siempre el mismo.
En las plantillas de Blogger los estilos de las imágenes en las entradas los encontraremos de la siguiente forma:.post img {
padding:4px;
border:1px solid $bordercolor;
}
también podemos encontrarlo así:
.post img, table.tr-caption-container {
padding:4px;
border:1px solid $bordercolor;
}
Cualquiera de ellos es el lugar que nos permitirá darle un aspecto distinto a las imágenes.
Hace un tiempo vimos como añadir distintos tipos de borde, también añadimos efecto hover al borde.
El efecto hover nos permite cambiar de aspecto un elemento cuando situamos el puntero sobre el elemento en este caso será sobre imágenes, para conseguir dicho efecto necesitamos añadir unas propiedades al evento hover y vamos a añadir la propiedad opacity.
Buscamos en plantilla edición de HTML los estilos para las imágenes de las entradas, añadimos la propiedad opacity marcada en negrita.
.post img {
opacity:0.6;
}
Justo después añadimos la misma propiedad para el efecto hover con la diferencia que la opacidad será de menor intensidad.
.post img:hover{
opacity: 1;
}
Personalmente esta propiedad me gusta más cuando el blog tiene fondo oscuro, así que vamos a añadir un fondo oscuro para el ejemplo y vemos el resultado.
 |
Si queremos dejar algún borde que tenemos añadido no será problema, combinamos borde con efecto hover.
|
.post img {
background:#333;
border:1px solid #333;
padding:4px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
-moz-box-shadow: 0px 0px 5px #fff;
-webkit-box-shadow:0px 0px 5px #fff;
box-shadow:0px 0px 5px #fff;
opacity:0.6;
}
.post img:hover{
opacity: 1;
}
Para conocer las propiedades que añadimos border-radius y box-shadow.
Si queremos añadir un borde distinto al establecido en los post.
Hermoso trabajo GEM@ :D
Gem@ felicidades por tus logros en el concurso de los premios 20 Blogs 2010... :)
Saludos!
jajaj.tampoco me resultó lo de vagabundia.definitivamente lo dejo por unos días.Lo que si me resultó bien fue eliminar subscribirse a entradas atom y la linea al final de los posts.Muchas gracias <3
Mi pregunta de hoy: Como le hago para eliminar esa barra que está encima del blog; donde salen las opciones de blogger??(cuadro de busqueda, compartir, seguir, siguiente blog, etc).
Que lindo queda!!! :)
P.D.= me encanta como está diseñado tu blog.Uno puede entrar decenas de veces y sigue sintiendose comodo.(en otros he obtenido una especie de saturación visual).
Muchas gracias quedo genial :)
:: Gracias Caa, me alegra qu ete guste :)
:: Muchas gracias Luis Kasanova, muy amable por venir a felicitarme :D
:: juan_santiago cuando algo se tuerce a veces es mejor eso, dejarlo para otro momento y suele ocurrir que aquello que no resultaba bien lo vemos con más claridad que la primera vez :D
Imagino que te refieres ala barra de Blogger ¿no?
http://gemablog-.blogspot.com/2006/12/eliminar-barra-de-blogger-beta.html
:: Si quedó lindo Toni Teror lo he visto en el blog de imágenes :)
:: Me alegra que te guste La hormiguita :D
Muy buena entrada Gemm@, como siempre te pasastes con estos trucos que aunque no lo apliquemos por el momento sabemos de donde ir a echar mano cuando la necesitemos, eso es la ventaja de seguir tu blog.
Henry :-)
me resultó exelente.Muchas gracias otra vez :)
:: Hola Henry, me alegra que te guste este efecto resulta un efecto muy sutil si la opacidad la disminuimos :)
:: juan_santiago he visto que tu blog se muestra ladeado a la izquierda, quizás no lo notes pero con una resolución grande puede apreciarse, prueba añadiendo en body padding: 0; creo que eso lo solucionará y quedará centrado ;)
mmm.no me queda claro en donde añadir eso.si me lo aclaras porfa <3
tambien me gustaria cambiar con respecto a los comentarios.he visto que en algunos blogs la pagina de comentarios se abre en una ventana aparte, y no es necesario salir de la pagina principal. Me ayudas con eso??
Gracias.
(espero no le hayas echado un vistazo a mi post a medio escribir :$)
Hola Gema! bueno a mi se me presento otro problema q ya me tiene arta!!
te explico!
cuando yo visito un blog y hago click en la cajita donde dice SEGUIR, luego en el panel de blogger NO ME LO MUESTRA EN MI LISTA DE BLOGS SEGUIDOS, osea hace de cuenta que nunca lo segui al blog, ahora si voy al panel de control y hago click en AÑADIR ingreso la direccion del blog que me interesa, si me carga las actualizaciones, PERO! al blog al cual segui le genera como otro usuario mio identificado con mi MAIL y sin avatar pero no puedo modificarlo, es como si fuera otra persona y no puedo hacer nada.
comenze mi blog hace poco pero tengo otro hace mas de 1año, recuerdo que me enseñaron a DEJAR DE SEGUIR UN BLOG QUE ESTABA SIGUIENDO, Pero hoy lo quiero probar y por mas que lo elimine el blog sigue ahi... Es posible que google tenga problemas o pase algo? (con respecto a mi primer problema) :( Gracias Gema!!
:: juan_santiago con body me refería a los estilos, lo tienes más o menos así:
body {
background:url(http://static2.grsites.com/archive/textures/dgrey/dgrey034.jpg);
background-attachment: fixed;
margin:0;
color:#cfe2f3;
font: x-small "Trebuchet MS", Trebuchet, Verdana, Sans-serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}
Para que los comentarios abran en ventana aparte lo puedes hacer en configuración/comentarios/ubicación del formulario de comentarios/ventana emergente ;)
:: Yessy el tema del gadget de comentarios es algo que desconozco, es un gadget que daba muchos problemas y pocas posibilidades puesto que se puede seguir un blog sin ese gadget.
De todas formas en escritorio al final del todo hay dos botones azules "Seguir" y "Administrar" creo que en el segundo puedes solucionar el tema de seguir y dejar de seguir un blog ;)
:: Yessy donde dije gadget de comentarios quise decir de seguidores :S
ahhh cómo me ha gustado tesoro!
Besos mi Julia :D
jaj.no logro notar la diferencia en mi pc.(con eso del padding:0).pero si tu lo dices.supongo que ahora quedó bien.Un beso <3
Mi pregunta :P: Se puede mostrar mas de una imagen en forma simultanea??.(algo asi como un botón play o adelantar para en el mismo espacio ir sucediendo una foto tras otra?).si se puede me encantaria poder aplicarlo en los posts.(encuentro que al ocupar mucho espacio en fotografias se pierde la atención del texto).Gracias.
:: Hola Graciela :)
Es un efecto muy sutil y bello fácil de aplicar así que si te animas por aquí ando sólo tienes que darme una voz y acudo ;)
:: juan_santiago pues no, yo tampoco lo noto :S lo miraré con distintas resolcuones y te comento...
Hay una forma de hacer eso que comentas con las imágenes, es algo así como un slideshows y JMiur mostraba uno hace unos días sin necesidad de librerías externas:
http://vagabundia.blogspot.com/2010/10/simplisimo-slideshow-sin-librerias.html
Personalmente me gustan más las ventanas modales cuando se trata de mostrar varias imágenes formando una galería:
http://gemablog-.blogspot.com/2009/05/lytebox-otra-forma.html
Y por último tengo en borrador una entrada sobre un visor de imágenes que es una maravilla y estoy utilizando en la bolsa, si no tienes prisa le daré salida de hoy a mañana :)
Buen articulo, muy entretenido, y felicitaciones por el blog, ya no soy un poco nuevo en esto pero desde que me inicie como blogger simpre le dado un vistazo para aprender algo interesante, Saludos y que sigan los exitos!!!!!
Buenísimo, me costó ponerlo pero funciona a la perfección ;) buena página.
:: @curio17 gracias por comentar :)
:: Me alegra que resultara bien Juli ;)
Nota: solo los miembros de este blog pueden publicar comentarios.